<template>
<div class="my-table-pagination">
    <div class="total-num-box">
        <p v-if="total">个数:<span>{{ total }}</span></p>
    </div>
    <div class="my-page-controls">
        
       <span 
       class="my-page-btn" 
       @click="gotoFirst">首页</span>
       <span 
       class="my-page-btn"
       @click="gotoPrev">
       <i class="el-icon-arrow-left"></i>上一页</span>
       <span 
       style="line-height: 30px;float: left;margin: 0 25px 0 10px"
       >第<i>{{ currentPage }}</i>页/共<em>{{ totalPage }}</em>页</span>
       <span 
       class="my-page-btn"
       @click="gotoNext">下一页<i class="el-icon-arrow-right"></i></span>
       <span 
       class="my-page-btn"
       @click="gotoEnd">尾页</span>
       <input class="ipt" type="text" v-model="inputNum">
       <span 
       style="line-height: 30px;cursor: pointer;"
       @click="jumpto">跳转</span>
        
       
    </div>
</div>
</template>

<script>

export default {
    data () {
        return {
            inputNum: ''
        }
    },
    props:['total','totalPage','curPage'],
    computed: {
        currentPage () {
            return this.totalPage === 0 ? 0 : this.curPage;
        }
    },
    methods: {
        jumpto () { // 跳转页面
            if (this.totalPage === 0) return;
            let num = parseInt(this.inputNum);
            if (isNaN(num) || num < 1 || num > this.totalPage) {
                return;
            }
            this.$emit('setPage',num);
            this.inputNum = '';
        },
        gotoFirst () { // 去首页
        if (this.totalPage === 0) return;
            this.$emit('setPage',1);
        },
        gotoPrev () { // 去上一页
        if (this.totalPage === 0) return;
            this.$emit('setPage',this.curPage-1);
        },
        gotoNext () { // 去下一页
        if (this.totalPage === 0) return;
            this.$emit('setPage',this.curPage+1);
        },
        gotoEnd () { // 去尾页
        if (this.totalPage === 0) return;
            this.$emit('setPage',this.totalPage);
        }
    }
   
}
</script>
<style>

@import url('../assets/tablepage.css');
    
</style>